<template>
  <div id="questionnaires-list" class="custom-table boxes-list" v-loading="isLoading">
    <div v-if="!questionnaires.length"
        class="easy-container no-data">{{ isLoading ? '' : '暂无数据' }}</div>
    <div v-for="questionnaire in questionnaires" :key="questionnaire.id"
        class="list-item p-b-0 paper-card radius-2 hover">
      <div class="flex align-items-center">
        <router-link
          :to="`/${$rp.QUESTIONNAIRES}/${questionnaire.id}`"
          class="primary-hover-color flex-1 f-normal">
          {{ questionnaire.title }}
        </router-link>
        <QuestionnairesListItemInfo :questionnaire="questionnaire"/>
      </div>
      <div class="m-t-10 easy-container-20 border-top flex align-items-center">
        <QuestionnaireInvitationLink v-if="questionnaire.released" :questionnaire="questionnaire"/>
        <QuestionnairesListItemButtons
          class="m-l-auto"
          :questionnaire="questionnaire"
          v-on:deletedQuestionnaire="deletedQuestionnaire"
          @copied="copiedQuestionnaire"
        />
      </div>
    </div>
  </div>
</template>

<script>
import QuestionnairesListItemInfo from './QuestionnairesListItemInfo';
import QuestionnaireInvitationLink from './QuestionnaireInvitationLink';
import QuestionnairesListItemButtons from './QuestionnairesListItemButtons';

export default {
  name: 'QuestionnairesList', // 问卷列表
  components: {
    QuestionnairesListItemInfo,
    QuestionnaireInvitationLink,
    QuestionnairesListItemButtons,
  },
  props: {
    questionnaires: { // 问卷列表数据
      type: Array,
      required: true,
    },
    isLoading: { // 是否正在接在列表数据
      type: Boolean,
      required: true,
    },
  },
  methods: {
    // 删除了问卷
    deletedQuestionnaire(q) { this.questionnaires.splice(this.questionnaires.indexOf(q), 1); },
    // 复制了问卷
    copiedQuestionnaire(beCopied, q) {
      this.questionnaires.splice(this.questionnaires.indexOf(beCopied) + 1, 0, q);
    },
  },
};
</script>

<style></style>
